<!doctype html>
<html lang="en" data-bs-theme="auto" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="NoteBook example">
    <meta name="author" content="Artem Korovkin">
    <title>Login</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
            crossorigin="anonymous"></script>

    <link href="../static/css/registration.css" rel="stylesheet">
    <link href="../css/registration.css" rel="stylesheet">
</head>
<body class="d-flex align-items-center py-4 bg-body-tertiary">

<main class="form-signin w-100 m-auto">
    <form th:action="@{/registration}" th:object="${account}" method="post" content="application/json"
          oninput='confirmPassword.setCustomValidity(confirmPassword.value !== password.value ? "Passwords do not match." : "")'>
        <h1 class="h3 mb-3 fw-normal text-center">Please sign up</h1>

        <div class="form-floating">
            <input th:field="${account.email}" type="email" class="form-control form-signup" id="floatingEmail" placeholder="name@example.com" name="email" required>
            <label for="floatingEmail">Email address</label>
        </div>
        <div class="form-floating">
            <input th:field="${account.firstName}" class="form-control form-signup" id="floatingFirstName" placeholder="Ivan" name="firstname" required>
            <label for="floatingFirstName">First name</label>
        </div>
        <div class="form-floating">
            <input th:field="${account.lastName}" class="form-control form-signup" id="floatingLastName" placeholder="Ivanov" name="lastname" required>
            <label for="floatingLastName">Last name</label>
        </div>
        <div class="form-floating">
            <input th:field="${account.password}" type="password" class="form-control form-signup" id="floatingPassword" placeholder="Password" name="password" required>
            <label for="floatingPassword" >Password</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control form-signup" id="floatingConfirmPassword" placeholder="Password" name="confirmPassword" required>
            <label for="floatingConfirmPassword">Confirm password</label>
        </div>

        <button class="btn btn-bd-primary w-100 py-2" type="submit">Sign up</button>

        <div class="text-start my-3">
            <a href="/login" class="nav-link link-body-emphasis px-2">
                Do you already have an account?
            </a>
        </div>

        <p class="mt-5 mb-3 text-body-secondary text-center">&copy; 2023–2023</p>
    </form>
</main>
</body>
</html>
